<template>
  <div class="mine">
    <div class="top">
      <van-image
        round
        width="5rem"
        height="5rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <div class="info">
        <div class="name">{{ userInfo?.username || '用户' }}</div>
      </div>
    </div>
    <van-cell-group class="opera" inset>
      <van-cell icon="credit-pay" title="我的订单" to="/OrderList" is-link />
      <van-cell icon="logistics" title="联系地址" to="/AddressList" is-link />
    </van-cell-group>
    <van-button class="out-btn" color="#1ba784" size="large" @click="logout"
      >退出账号</van-button
    >
    <Tabbar class="tabbar" :curRoute="curRoute" />
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import Tabbar from '@/components/Tabbar/Tabbar.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user.store'

const router = useRouter()
const store = useUserStore()
const curRoute = ref('Mine')

const { userInfo } = storeToRefs(store)

// 退出登录
const logout = () => {
  store.logout()
  router.push('/login')
}
</script>

<style lang="less" scoped>
.mine {
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .top {
    width: 100%;
    height: 150px;
    background-color: #1ba784;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .info {
      margin-left: 20px;
      .name {
        font-size: 1.5rem;
        color: #fff;
      }
    }
  }
  .opera {
    margin-top: 20px;
  }
}
.out-btn {
  position: absolute;
  width: 90%;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
